<template>
  <div class="shop">
    <Header />
    <div class="shop-content">
      <div class="shop-nav">
        <el-breadcrumb :separator-icon="ArrowRight">
          <el-breadcrumb-item>商城</el-breadcrumb-item>
          <el-breadcrumb-item>所有商品</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <div class="shop-buy">
        <div class="shop-left">
          <div class="left-place">
            <div @click="() => {
              placeTitle = !placeTitle
              place = !place
            }" class="place-title">
              <div>场所</div>
              <div>
                <img :style="`transform: rotateZ(${ placeTitle ? 270 : 180 }deg);`" src="/img/left.png" alt="">
              </div>
            </div>
            <div :style="`height: ${ place ? 50 * 4 + 'px' : '0' };`" class="place-items">
              <div class="item">
                <div>
                  <el-checkbox style="margin-top: 2px;" v-model="place_item1" />
                  <span @click="place_item1 = !place_item1">起居室</span>
                </div>
                <div>(5)</div>
              </div>
              <div class="item">
                <div>
                  <el-checkbox style="margin-top: 2px;" v-model="place_item2"/>
                  <span @click="place_item2 = !place_item2">卧室</span>
                </div>
                <div>(10)</div>
              </div>
              <div class="item">
                <div>
                  <el-checkbox style="margin-top: 2px;" v-model="place_item3" />
                  <span @click="place_item3 = !place_item3">厨房</span>
                </div>
                <div>(15)</div>
              </div>
              <div class="item">
                <div>
                  <el-checkbox style="margin-top: 2px;" v-model="place_item4" />
                  <span @click="place_item4 = !place_item4">装饰</span>
                </div>
                <div>(35)</div>
              </div>
            </div>
          </div>
          <div class="left-price">
            <div @click="() => {
              priceTitle = !priceTitle
              price = !price
            }" class="price-title">
              <div>价格</div>
              <div>
                <img :style="`transform: rotateZ(${ priceTitle ? 270 : 180 }deg);`" src="/img/left.png" alt="">
              </div>
            </div>
            <div class="price-item" :style="`height: ${ price ? '69px' : '0' };`">
              <div>价格区间: ￥0 ~ ￥2000</div>
              <el-slider v-model="slider" :max="2000" size="small" range />
            </div>
          </div>
          <div class="left-brand">
            <div @click="() => {
              brandTitle = !brandTitle
              brand = !brand
            }" class="brand-title">
              <div>品牌</div>
              <div>
                <img :style="`transform: rotateZ(${ brandTitle ? 270 : 180 }deg);`" src="/img/left.png" alt="">
              </div>
            </div>
            <div :style="`height: ${ brand ? 50 * 6 : 0 }px;`" class="brand-items">
              <div class="item">
                <div>
                  <el-checkbox style="margin-top: 2px;" v-model="brand_item1" />
                  <span @click="brand_item1 = !brand_item1">EleganceWood</span>
                </div>
                <div>(6)</div>
              </div>
              <div class="item">
                <div>
                  <el-checkbox style="margin-top: 2px;" v-model="brand_item2"/>
                  <span @click="brand_item2 = !brand_item2">NobleCraft</span>
                </div>
                <div>(20)</div>
              </div>
              <div class="item">
                <div>
                  <el-checkbox style="margin-top: 2px;" v-model="brand_item3" />
                  <span @click="brand_item3 = !brand_item3">PrestigeFurniture</span>
                </div>
                <div>(7)</div>
              </div>
              <div class="item">
                <div>
                  <el-checkbox style="margin-top: 2px;" v-model="brand_item4" />
                  <span @click="brand_item4 = !brand_item4">regalTimber</span>
                </div>
                <div>(16)</div>
              </div>
              <div class="item">
                <div>
                  <el-checkbox style="margin-top: 2px;" v-model="brand_item5" />
                  <span @click="brand_item5 = !brand_item5">VirtuosoVeneer</span>
                </div>
                <div>(10)</div>
              </div>
              <div class="item">
                <div>
                  <el-checkbox style="margin-top: 2px;" v-model="brand_item6" />
                  <span @click="brand_item6 = !brand_item6">SovereignSpruce</span>
                </div>
                <div>(2)</div>
              </div>
            </div>
          </div>
          <div class="left-color">
            <div class="color-title">
              <div>颜色</div>
            </div>
          </div>
        </div>
        <div class="shop-right">
          <div class="right-up">
            <div>共60条结果</div>
            <div></div>
          </div>
          <div class="right-down">
            <Card v-for="(item, index) in card" :item="item" :key="index" />
          </div>
          <div class="right-pagenation">
            <div @click="up" class="pagenation-arrow">
              <el-icon :size="20" :color="present == 1 ? '#A3AAAB' : '#141C1D'">
                <Back />
              </el-icon>
            </div>
            <div @click="present = 1" :class="`pagenation-first ${ present == 1 ? 'active1' : 'nonactive1' }`">1</div>
            <transition enter-active-class="animate__animated animate__fadeIn">
              <div class="pagenation-default" v-show="present > 3 && total > 5">···</div>
            </transition>
            
            <div @click="present = prev" :class="present == prev ? 'active1' : 'nonactive1'" v-show="total >= 3">{{ prev }}</div>
            <div @click="present = cur" :class="present == cur ? 'active1' : 'nonactive1'" v-show="total >= 4">{{ cur }}</div>
            <div @click="present = last" :class="present == last ? 'active1' : 'nonactive1'" v-show="total >= 5">{{ last }}</div>
            <transition enter-active-class="animate__animated animate__fadeIn">
              <div class="pagenation-default" v-show="present < total - 2 && total > 5">···</div>
            </transition>
            <div @click="present = total" :class="`pagenation-last ${ present == total ? 'active1' : 'nonactive1' }`">{{ total }}</div>
            <div @click="down" class="pagenation-arrow">
              <el-icon :size="20" :color="present == total ? '#A3AAAB' : '#141C1D'">
                <Right />
              </el-icon>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script setup lang="ts">
import { ArrowRight } from '@element-plus/icons-vue'
import { computed, ref } from 'vue'

const placeTitle = ref<boolean>(true)
const priceTitle = ref<boolean>(true)
const brandTitle = ref<boolean>(true)

// place中每个筛选目标
const place_item1 = ref<boolean>(false)
const place_item2 = ref<boolean>(false)
const place_item3 = ref<boolean>(false)
const place_item4 = ref<boolean>(false)

// brand中每个筛选目标
const brand_item1 = ref<boolean>(false)
const brand_item2 = ref<boolean>(false)
const brand_item3 = ref<boolean>(false)
const brand_item4 = ref<boolean>(false)
const brand_item5 = ref<boolean>(false)
const brand_item6 = ref<boolean>(false)

const place = ref<boolean>(true)
const price =  ref<boolean>(true)
const brand = ref<boolean>(true)

const slider = ref([0, 2000])

const card = ref([
  { img: '/img/g1.png', brand: 'EleganceWood', name: '米兰时尚椅', price: '￥298.00' },
  { img: '/img/g2.png', brand: 'NobleCraft', name: '威尼斯晨光沙发', price: '￥699.00' },
  { img: '/img/g3.png', brand: 'PrestigeFurniture', name: '雅致流苏边桌', price: '￥369.00' },
  { img: '/img/g4.png', brand: 'regalTimber', name: '极简立方体边桌', price: '￥239.00' },
  { img: '/img/g5.png', brand: 'VirtuosoVeneer', name: '塞纳河畔边桌', price: '￥229.00' },
  { img: '/img/g6.png', brand: 'EleganceWood', name: '都市绿洲沙发', price: '￥869.00' },
  { img: '/img/g7.png', brand: 'NobleCraft', name: '巴洛克华冠', price: '￥599.00' },
  { img: '/img/g8.png', brand: 'SovereignSpruce', name: '晨曦曙光椅', price: '￥199.00' },
  { img: '/img/g1.png', brand: 'EleganceWood', name: '米兰时尚椅', price: '￥298.00' },
  { img: '/img/g2.png', brand: 'NobleCraft', name: '威尼斯晨光沙发', price: '￥699.00' },
  { img: '/img/g3.png', brand: 'PrestigeFurniture', name: '雅致流苏边桌', price: '￥369.00' },
  { img: '/img/g4.png', brand: 'regalTimber', name: '极简立方体边桌', price: '￥239.00' },
  { img: '/img/g5.png', brand: 'VirtuosoVeneer', name: '塞纳河畔边桌', price: '￥229.00' },
  { img: '/img/g6.png', brand: 'EleganceWood', name: '都市绿洲沙发', price: '￥869.00' },
  { img: '/img/g7.png', brand: 'NobleCraft', name: '巴洛克华冠', price: '￥599.00' },
])

const total = ref<number>(50)
const present = ref<number>(1)

const up = () => {
  if (present.value == 1) return
  present.value--
}

const down = () => {
  if (present.value == total.value) return
  present.value++
}

const prev = computed(() => total.value > 5 && present.value >= 3 && present.value <= total.value - 2 ? present.value - 1 : present.value < 3 ? 2 : total.value - 3)
const cur = computed(() => total.value > 5 && present.value >= 3 && present.value <= total.value - 2 ? present.value : present.value < 3 ? 3 : total.value - 2)
const last = computed(() => total.value > 5 && present.value >= 3 && present.value <= total.value - 2 ? present.value + 1 : present.value < 3 ? 4 : total.value - 1)
</script>

<style lang="less" scoped>
.shop {
  .shop-content {
    width: 70%;
    margin: auto;

    .shop-nav {
      margin: 50px 0;

      :deep(.el-breadcrumb) {
        --el-text-color-regular: rgb(20, 28, 29);
        --el-text-color-placeholder: rgb(20, 28, 29);
        font-size: 14px;
        font-weight: 400;
      }
    }

    .shop-buy {
      display: flex;
      justify-content: space-between;

      .shop-left {
        width: 20%;

        .left-place {
          width: 100%;

          .place-title {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 21px;

            color: rgb(20, 28, 29);
            font-family: Epilogue;
            font-size: 18px;
            font-weight: 700;
            line-height: 22px;

            > div:first-child {
              cursor: pointer;
            }

            > div:last-child {
              display: flex;
              justify-content: center;
              align-items: center;

              img {
                width: 20px;
                height: 20px;
                transition: all 0.3s ease-in-out;
              }
            }
          }

          .place-items {
            width: 100%;
            overflow: hidden;
            transition: all 0.3s ease-in-out;

            .item {
              width: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 16px;

              > div:first-child {
                display: flex;
                justify-content: center;
                align-items: center;

                :deep(.el-checkbox__inner) {
                  height: 15px;
                  width: 15px;
                }

                :deep(.el-checkbox) {
                  margin-top: 0;
                }

                span {
                  cursor: pointer;
                  display: inline-block;
                  margin-left: 6px;

                  color: rgb(20, 28, 29);
                  font-family: Epilogue;
                  font-size: 16px;
                  font-weight: 400;
                }
              }

              > div:last-child {
                color: rgb(20, 28, 29);
                font-family: Epilogue;
                font-size: 16px;
                font-weight: 400;
                line-height: 30px;
              }
            }
          }
        }

        .left-price {
          width: 100%;

          .price-title {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 21px;

            color: rgb(20, 28, 29);
            font-family: Epilogue;
            font-size: 18px;
            font-weight: 700;
            line-height: 22px;

            > div:first-child {
              cursor: pointer;
            }

            > div:last-child {
              display: flex;
              justify-content: center;
              align-items: center;

              img {
                width: 20px;
                height: 20px;
                transition: all 0.3s ease-in-out;
              }
            }
          }

          .price-item {
            width: 100%;
            overflow: hidden;
            transition: all 0.3s;

            div:first-child {
              margin-bottom: 16px;
            }

            :deep(.el-slider) {
              --el-slider-height: 2px;
              --el-slider-main-bg-color: #088395;
              --el-slider-button-size: 14px;
              --el-slider-button-wrapper-size: 32px;
              --el-color-white: #088395;
              width: 94%;
              height: 32px;
              margin-left: 8px;
            }

            :deep(.el-slider--small) {
              height: none;
            }
          }
        }

        .left-brand {
          width: 100%;

          .brand-title {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 21px;

            color: rgb(20, 28, 29);
            font-family: Epilogue;
            font-size: 18px;
            font-weight: 700;
            line-height: 22px;

            > div:first-child {
              cursor: pointer;
            }

            > div:last-child {
              display: flex;
              justify-content: center;
              align-items: center;

              img {
                width: 20px;
                height: 20px;
                transition: all 0.3s ease-in-out;
              }
            }
          }

          .brand-items {
            width: 100%;
            overflow: hidden;
            transition: all 0.4s;

            .item {
              width: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 16px;

              > div:first-child {
                display: flex;
                justify-content: center;
                align-items: center;

                :deep(.el-checkbox__inner) {
                  height: 15px;
                  width: 15px;
                }

                :deep(.el-checkbox) {
                  margin-top: 0;
                }

                span {
                  cursor: pointer;
                  display: inline-block;
                  margin-left: 6px;

                  color: rgb(20, 28, 29);
                  font-family: Epilogue;
                  font-size: 16px;
                  font-weight: 400;
                }
              }

              > div:last-child {
                color: rgb(20, 28, 29);
                font-family: Epilogue;
                font-size: 16px;
                font-weight: 400;
                line-height: 30px;
              }
            }
          }
        }

        .left-color {
          width: 100%;
          .color-title {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 21px;

            color: rgb(20, 28, 29);
            font-family: Epilogue;
            font-size: 18px;
            font-weight: 700;
            line-height: 22px;

            > div:first-child {
              cursor: pointer;
            }
          }
        }
      }

      .shop-right {
        width: 965px;

        div:not(:nth-child(3)):not(:nth-child(7)) {
          cursor: pointer;
          transition: all, 0.3s ease-in-out;
        }

        .right-up {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 20px;

          color: rgb(20, 28, 29);
          font-size: 16px;
          font-weight: 400;
        }

        .right-down {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
        }

        .right-pagenation {
          width: 100%;
          display: flex;
          justify-content: end;
          margin: 50px 0 100px;

          > div:not(:last-child, :first-child) {
            border-radius: 5px;

            width: 40px;
            height: 40px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;

            font-size: 16px;
            font-weight: 400;
            margin-right: 10px;
          }

          .active1 {
            background-color: #088395;
            color: #fff;
          }

          .nonactive1 {
            border: 1px solid rgb(20, 28, 29);
            color: #141C1D;
          }

          div:first-child {
            margin-right: 10px;
          }

          .pagenation-arrow {
            width: 40px;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
    }
  }
}
</style>